<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="时间轴" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24" >
			<view class="text-size-s pa-16 mb-24 blue text  round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">时间轴中，可以随意更改节点图标，线条颜色，节点大小，颜色主题的切换。</view>
			<tm-timeline :list="list2" color="blue"></tm-timeline>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24 ">时间轴左</view>
			<tm-timeline color="green" :list="list" model="left"></tm-timeline>
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24 ">时间轴右</view>
			<tm-timeline color="pink" :list="list" model="right"></tm-timeline>
			
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</view>
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmTimeline from "@/tm-vuetify/components/tm-timeline/tm-timeline.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmTimeline,tmIcons},
		data() {
			return {
				list2:[
					{
						title:'快件已签收',
						content:'当前快件已经签收，感谢你的使用，如需联系请拨打：10086',
						time:"2020年7月",
						color:'grey',
						size:24,
					},
					{
						title:'已到南昌',
						content:'当前快件已经在南昌榆林中站转，准备发往派送点。',
						time:"2019年7月",
						borderColor:this.$tm.vx.state().tmVuetify.color||'bg-gradient-green-accent',
						size:24,
					},
					{
						title:'已到上海',
						content:'当前快件已到上海中转站预备发往江西南昌榆林站',
						time:"2018年7月",
						size:24,
						
						borderColor:this.$tm.vx.state().tmVuetify.color||'bg-gradient-green-accent'
					},
					{
						title:'商家发货',
						content:'中通开始收件',
						time:"2017年7月1日",
						borderColor:this.$tm.vx.state().tmVuetify.color||'bg-gradient-green-accent',
						size:24,
					
					},
				],
				list:[
					{
						title:'',
						content:'我是内容我是内容我是内容',
						time:"2020年7月",
						color:"grey",
						borderColor:'green'
					},
					{
						title:'说明文字',
						content:'我是内容我是内容我是内容',
						time:"2019年7月",
						color:"bg-gradient-green-accent",
						borderColor:'bg-gradient-primary-accent',
						size:42,
						icon:'icon-QQ',
					},
					{
						title:'说明文字',
						content:'我是内容我是内容我是内容',
						time:"2018年7月",
						borderColor:'bg-gradient-orange-accent',
						color:"bg-gradient-primary-accent"
					},
					{
						title:'说明文字',
						content:'我是内容我是内容',
						time:"2017年7月",
						color:"bg-gradient-orange-accent",
						icon:'icon-position-fill',
						
						size:36
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
